おはー(Uㅎ_ㅎU)⑅ SONYKO 打油 ( 眼神死 )

已經連續好幾天睡眠 < 5hr 了
睡太少好像真的會變笨 糟糕。

最近開始覺得腦袋動不太起來、
對著MDN 發呆的時間也變多了 w　
( 總覺得很像惡靈古堡的那個管理員的日記

癢 好吃

今天介紹一個讚匹兩論的陣列操作 —— reduce
來看看他是什麼神奇的東西吧。

⑅　reduce　リデュース

reduce 老實說我沒有用過他 (ง ˙˘˙ )ว ✧
聽說他可以做得事情很多、多到我不太知道他在幹嘛ww

所以我只介紹我蝌蚪腦能理解的部分 。

⑅　reduce 的公式：

// 陣列操作、有陣列也是摸雞弄的事情。
let arr = [1,2,3,4,5]

let 變數名 = arr.reduce(function(函式參數){

		// 執行動作寫這邊 

},第2參數)

所以 reduce 的括號內會帶一個函式、與第2 參數。
那個第2 參數我們可以說他是 「 初始値 」✧

⑅　reduce 語法解說

reduce 有人說他像是有帶有 暫存器 的 forEach、
還記得 forEach 怎麼累加嗎？

我們會先建立一個變數、專門用來裝 forEach 累加結果的變數。
那個變數我們會賦予他 0 的値。

接著使用 forEach 跑過陣列每筆資料，
把資料一一加到變數裡面，最後再輸出總價。 如下：

let num = [1,2,3,4,5,6,7]
let total = 0

num.forEach((i)=>{
	total += i
})
console.log (total)   // 28

reduce 的概念就是，你可以帶一個暫存的變數，並能不斷地對他做累積性的變更。
最後會傳回暫存的變數，並作為結果。

⑅ 來看程式碼：

let num = [100,200,300,400,500]
let total = num.reduce(function(total,i){
	return total + i
},0)

console.log(total) // 1500

• 上面的 function(total,i) 的 total 是那個累積的暫存、i 代表每個元素。
• total 的初始値 是我們的第2 參數，
  若不打參數就是0 、當然你也可以代100 進去，你的total 就會從100 開始累加。

⑅ 再來看一個範例：

// 安定ㄉ陣列
let hp = [
	{ name:'鋼龍',
		hp: 18000 },
	{ name: '冰咒龍',
		hp: 20000 },
	{ name: '眩鳥',
		hp: 10 },
	{ name: '泡狐龍',
		hp: 500 }
]

// 如上面介紹的 用reduce 將 hp 全部加起來
let total_hp = hp.reduce(function(total_hp,i){
		return total_hp + i.hp
},10000) // 這邊注意、初始値是給 10000

console.log(total_hp)    // 48510

這個範例我們試著讓初始値為 10000、
理所當然它會從 10000 開始累加陣列中的 hp 。

°♡ 這邊注意：
　　function 內的第一個參數沒有規定要使用變數名稱。
　　只是方便理解才這樣寫的 (U 'ᴗ' U)

let num = [1,2,3]
let new_num = num.reduce(function(a,b){
			return a + b
},0)

console.log(new_num)    // 6

證實：函式參數你想帶什麼都可以。

⑅　reduce 還能做什麼

reduce 根本萬能工具人。
這邊舉一些例子。

• 字串加總
  可以加數字、它當然也能加字串 ✧
  像這樣：

  let str = ['ま','っ','き','ー','今日','も','かわいい。']
  let new_str = str.reduce(function(new_str,i){
  	return new_str + i
  })
  console.log(new_str)
  				// "まっきー今日もかわいい。"
  

• 當 map 用

  const arr = [11, 22, 33]
  
  const result = arr.reduce((r, i, index) => {
    r[index] = 1000 + i
    return r
  }, [])
  console.log(result)
  　　　// [ 1011, 1022, 1033 ]
  

♡ 　index 為陣列的索引 。

• 當 filter 用

  const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  
  const result = arr.reduce((r, i) => {
    if (i % 3 === 0) {
      r.push(i)
    }
    return r
  }, [])
  console.log(result)　　// [ 3, 6, 9 ]
  

• 當 find 用

  const result = arr.reduce((r, i) => {
    if (r) {
      return r;
    }
  
    if (i.id === '003') {
      return i;
    }
  
    return undefined;
  }, undefined);
  console.log(result);
  　　　　// { id: "003", name: "傘電鳥" }
  

哇賽、什麼都會欸 ww
當然還有更多的寫法、這邊先舉部分我看得懂的例子 。

想吸收所有用法，請服用 MDN (U 'ᴗ' U) ♡♡

什麼？ 你說我今天怎麼好像滿偷懶的？
欸欸欸欸，你看視窗右上角好像有什麼東西 ！

　　　　　　　　　　　　　　　　　　　ε≡≡ﾍ( ´Д`)ﾉ 逃跑

୨୧(U 'ᴗ' U) SONYKO的　前端日文小教室 ♡

「師傅！不要丟下我啊！」

「徒兒、師傅怎麼會丟下你呢？」
「徒兒你看視窗右上角、好像有什麼東西！」

　　　　　　　　　　　　　　　　　　　ε≡≡ﾍ( ´Д`)ﾉ

　
音声ファイル(U 'ᴗ' U)♡

師傅最近很苦惱、
因為他找不到什麼好單字可以教 ((

既然 JS 單字教得差不多了、就來點 HTML關聯的吧。

⑅　HTML 的唸法： 欸氣 踢 欸姆 欸魯
　　超煞氣、還不快記起來

⑅　箇条書き（かじょうがき）條列式，也就是我們的
　　唸法： Ka Jou Ga Ki
　
⑅　アプリ　application 的縮寫、應用程式
　　唸法：阿普哩
　
⑅　スマホアプリ　Smartphone Application 的縮寫
　　WTF 你們怎麼那麼愛縮寫
　　唸法：斯嗎齁 阿普哩
　
⑅　検索エンジン（ けんさくえんじん ）搜尋引擎
　　唸法：Ken Saku En Jin
　
⑅　テキストエディタ　Text Editor　文字編輯器
　　唸法：Teki Suto 欸低塔
　
⑅　ソースコード　source code　程式碼
　　唸法：艘～斯 扣～抖
　
⑅　レイアウト　layout　唸法：雷伊 奧屋透
　
　

「 欸、你的 欸取踢欸姆欸魯 的 雷伊奧嗚透 做完了沒啊？」